<template>
	<div class="cljk-table">
		<el-table :data="tableData" border style="width: 100%;" :height="tableH+'vh'"
			:header-row-style="{height:'30px'}" :header-cell-style="{
            textAlign: 'center',
            height: '30px',
        }" size="mini" @row-click="selectRow" ref="lsspTable">

			<el-table-column prop="simNo" label="终端标识" width="120" align="center"></el-table-column>
			<el-table-column prop="logicChannelNo" label="视频通道号" width="100" align="center">
				<template slot-scope="scope">
					{{'CH-'+scope.row.logicChannelNo}}
				</template>
			</el-table-column>
			<el-table-column prop="beginTimeStr" label="开始时间" align="center" width="150"></el-table-column>
			<el-table-column prop="endTimeStr" label="结束时间" align="center" width="150"></el-table-column>
			<el-table-column prop="alarmTxt" label="报警标识" show-overflow-tooltip></el-table-column>
			<el-table-column prop="avresourceType" label="资源类型" width="70" align="center">
				<template slot-scope="scope">
					{{formatSource(scope.row.avresourceType)}}
				</template>
			</el-table-column>
			<el-table-column prop="streamType" label="码流类型" width="70" align="center">
				<template slot-scope="scope">
					{{formatStream(scope.row.streamType)}}
				</template>
			</el-table-column>
			<el-table-column prop="memoryType" label="存储器类型" width="90" align="center">
				<template slot-scope="scope">
					{{formatMem(scope.row.memoryType)}}
				</template>
			</el-table-column>
			<el-table-column prop="fileSize" label="文件大小" width="80">
				<template slot-scope="scope">
					{{(scope.row.fileSize/(1024*1024)).toFixed(2)+'MB'}}
				</template>
			</el-table-column>
			<el-table-column prop="status" label="终端上传状态" width="100">
				<template slot-scope="scope">
					<el-tag size="mini" type="success" v-if="scope.row.status===0">上传成功</el-tag>
					<el-tag size="mini" type="danger" v-if="scope.row.status===1">上传失败</el-tag>
				</template>
			</el-table-column>

			<el-table-column prop="status" label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" icon="el-icon-upload el-icon--right" @click="reUpload(scope.row)" :loading.sync="scope.row.loading" :disabled.sync="scope.row.loading">重传</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div style="display: flex;align-items: center;padding: 0 8px;">
			<i class="el-icon-refresh" @click="refreshList" />
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageInfo.page" :page-sizes="[20, 50, 100, 200, 300, 400]" :page-size="pageInfo.size"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"></el-pagination>
		</div>

	</div>
</template>

<script>
	import {
		videoPlayBack,
		getVideoPlayBack,
		videoReUpload,
		getVideoReUpload
	} from '@/api/cljk.js';
	export default {
		name: 'lsspTable',
		props: {
			bottomHeight: {
				type: String,
				default: function() {
					return 22 + 'vh';
				},
				required: true
			},
			sourceTableData: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			},
			searchVideoParam: {
				type: Object,
				default: function() {
					return {};
				},
				required: true
			}
		},
		watch: {
			bottomHeight: function(val) {
				if (val === '22vh') {
					this.tableH = 15
				} else {
					this.tableH = 74
				}
			},
			sourceTableData: function(val) {
				this.pageInfo.total = val.length
				this.tableData = []
				this.handleSizeChange(20)
			}
		},
		data() {
			return {
				tableData: [],
				tableH: 15,
				pageInfo: {
					page: 1,
					size: 20,
					total: 0,
				},
				intervalId: null,
				countTime: new Date(),
				requestCount: 0,
				verifyCode: null,
				curRow:null
			}
		},
		methods: {
			
			startSendingRequests() {
				this.countTime = new Date()
				this.intervalId = setInterval(() => {
					const elapsedTime = Date.now() - this.countTime;
					if (elapsedTime >= 60000) {
						clearInterval(this.intervalId);
						this.curRow.loading=false
						this.$message({
							message:'终端未响应',
							type:'warning'
						})
						return;
					}
				
					getVideoReUpload({
						simNo: this.curRow.simNo,
						verifyCode:this.verifyCode
					}).then(res => {
						if (res.code === 200) {
							clearInterval(this.intervalId);
							this.curRow.loading=false
							console.log('请求成功，已停止发送请求');
							this.refreshList()
						}
			
					})
					this.requestCount++;
					if (this.requestCount >= 60 && !this.responseData) {
						clearInterval(this.intervalId);
						console.log('已发送60次请求但未成功，停止发送请求');
					}
				}, 1000);
			},
			
			reUpload(row){
				if(row.status===0){
					this.$message({
						type:'success',
						message:'视频已上传成功'
					})
					return
				}else{
					var param={
						channelNo:row.logicChannelNo,
						simNo:row.simNo,
						startTime:row.beginTimeStr,
						endTime:row.endTimeStr
					}
					this.curRow=row
					this.$set(row,'loading',true)
					videoReUpload(param).then(res=>{
						if(res.code===200){
							this.verifyCode=res.data
							this.startSendingRequests()
						}
					});
					
					
					
				}
			},
			refreshList() {
				if (this.searchVideoParam) {
					this.tableData = []
					videoPlayBack(this.searchVideoParam).then(res => {
						if (res.code === 200) {
							this.pageInfo.total = res.data
							this.sourceTableData = res.data
							this.handleSizeChange(20)
						}
					})
				}

			},
			selectRow(row, column, event) {
				// 先移除之前选中行的样式类（如果有的话）
				const prevSelectedRow = this.$refs.lsspTable.$el.querySelectorAll('.selected-row');
				prevSelectedRow.forEach((rowEl) => {
					rowEl.classList.remove('selected-row');
				});

				// 将当前选中行的样式类添加到点击的行上
				const currentRowEl = this.$refs.lsspTable.$el.querySelectorAll('.el-table__row')[this.tableData.indexOf(
					row)];
				currentRowEl.classList.add('selected-row');
				this.$emit('on-selected-row', row)
			},

			formatMem(val) {
				if (val === 1) {
					return '主存储器'
				} else if (val === 2) {
					return '灾备存储器'
				}
			},

			formatStream(val) {
				if (val === 1) {
					return '主码流'
				} else if (val === 2) {
					return '子码流'
				}
			},
			formatSource(val) {
				if (val === 0) {
					return '音视频'
				} else if (val === 1) {
					return '音频'
				} else if (val === 2) {
					return '视频'
				}
			},

			handleSizeChange(val) {
				this.pageInfo.page = 1;
				this.pageInfo.size = val;
				this.tableData = this.currentChangePage(val, this.pageInfo.page);
			},
			/** 切换分页 */
			handleCurrentChange(val) {
				this.pageInfo.page = val;
				this.tableData = this.currentChangePage(this.pageInfo.size, val);
			},
			currentChangePage(size, current) {
				const tablePush = [];
				let array = this.sourceTableData
				array.forEach((item, index) => {
					if (size * (current - 1) <= index && index <= size * current - 1) {
						tablePush.push(item);
					}
				});
				return tablePush;
			},
		},
		mounted() {
			this.refreshList()
		}


	}
</script>

<style lang="scss">
	.cljk-table {

		.el-table--mini td,
		.el-table--mini th {
			padding: 0 !important;
		}

		.el-table td,
		.el-table th {
			padding: 0;
		}

		.el-table .cell {
			line-height: 15px;
		}

		.selected-row {
			background-color: lightskyblue;
		}
	}
</style>